<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>data-filter</title>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <!-- TODO:数据监控列表渲染过滤 -->
            <input type="text" placeholder="请输入关键字" v-model="keyword"/>
            <ul>
                <li v-for="person in newPersons" :key="person.id">
                    {{person.id}}-{{person.name}}--{{person.age}}
                </li>
            </ul>
        </div>
        <script>
            new Vue({
                el: '#app',
                data() {
                    return {
                        keyword: '',
                        persons: [
                            { id: 1, name: 'zhaoliying', age: 33 },
                            { id: 2, name: 'yangmi', age: 34 },
                            { id: 3, name: 'qiwei', age: 40 },
                            { id: 4, name: 'dilireba', age: 20 },
                        ],
                        newPersons:[],
                    };
                },
                watch:{
                    keyword:{
                        handler() {
                            let{keyword, persons} = this;
                            let arr = persons.filter((item)=>{
                                return item.name.indexOf(keyword) !== -1;
                            });
                            this.newPersons = arr;

                        },
                        immediate:true,
                    }
                }
            });
        </script>
    </body>
</html>
